<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题和操作区 -->
        <section class="mb-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">应用分类</h2>
                    <p class="text-gray-500 mt-1">管理您的应用分类和相关应用程序</p>
                </div>
                
                <div class="flex flex-wrap items-center gap-3">
                    <div class="relative">
                        <input type="text" placeholder="搜索分类..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all w-full md:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    </div>
                    
                    <button id="add-category" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-5 rounded-lg transition-all duration-300 flex items-center gap-2 shadow-md hover:shadow-lg">
                        <i class="fa fa-plus"></i>
                        <span>添加分类</span>
                    </button>
                </div>
            </div>
            
            <!-- 统计概览 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">总分类数</p>
                            <h3 class="text-2xl font-bold mt-1">6</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-folder text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 text-sm flex items-center">
                        <span class="text-success flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i>12%
                        </span>
                        <span class="text-gray-500 ml-2">较上月</span>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">应用总数</p>
                            <h3 class="text-2xl font-bold mt-1">24</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-info/10 flex items-center justify-center text-info">
                            <i class="fa fa-th text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 text-sm flex items-center">
                        <span class="text-success flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i>8%
                        </span>
                        <span class="text-gray-500 ml-2">较上月</span>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">本周活跃</p>
                            <h3 class="text-2xl font-bold mt-1">18</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success">
                            <i class="fa fa-line-chart text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 text-sm flex items-center">
                        <span class="text-success flex items-center">
                            <i class="fa fa-arrow-up mr-1"></i>5%
                        </span>
                        <span class="text-gray-500 ml-2">较上周</span>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">平均使用时长</p>
                            <h3 class="text-2xl font-bold mt-1">2.5h</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning">
                            <i class="fa fa-clock-o text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4 text-sm flex items-center">
                        <span class="text-danger flex items-center">
                            <i class="fa fa-arrow-down mr-1"></i>3%
                        </span>
                        <span class="text-gray-500 ml-2">较上周</span>
                    </div>
                </div>
            </div>
            
            <!-- 使用统计图表 -->
            <div class="bg-white rounded-xl p-5 card-shadow mb-8">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-bold text-lg">应用使用统计</h3>
                    <div class="flex space-x-2">
                        <button class="text-xs bg-primary/10 text-primary px-3 py-1 rounded-full hover:bg-primary/20 transition-colors active">今日</button>
                        <button class="text-xs bg-gray-100 text-gray-600 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">本周</button>
                        <button class="text-xs bg-gray-100 text-gray-600 px-3 py-1 rounded-full hover:bg-gray-200 transition-colors">本月</button>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="usageChart"></canvas>
                </div>
            </div>
        </section>

        <!-- 应用分类列表 -->
        <section>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 办公分类 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                    <div class="h-2 bg-primary"></div>
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-5">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mr-3">
                                    <i class="fa fa-briefcase text-primary"></i>
                                </div>
                                <h3 class="font-bold text-dark">办公</h3>
                            </div>
                            <div class="flex space-x-2">
                                <button class="edit-category text-gray-500 hover:text-primary p-1.5 rounded-full hover:bg-primary/10 transition-colors" data-id="1">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-category text-gray-500 hover:text-danger p-1.5 rounded-full hover:bg-danger/10 transition-colors" data-id="1">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-3 mb-4">
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-primary/10 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                </div>
                                <span class="text-xs text-gray-600">文档处理</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-primary/10 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-calendar text-primary"></i>
                                </div>
                                <span class="text-xs text-gray-600">日程安排</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-primary/10 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-envelope-o text-primary"></i>
                                </div>
                                <span class="text-xs text-gray-600">邮件客户端</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>4 个应用</span>
                            <button class="text-primary hover:underline">查看全部</button>
                        </div>
                    </div>
                </div>
                
                <!-- 设计分类 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                    <div class="h-2 bg-purple-500"></div>
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-5">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-paint-brush text-purple-500"></i>
                                </div>
                                <h3 class="font-bold text-dark">设计</h3>
                            </div>
                            <div class="flex space-x-2">
                                <button class="edit-category text-gray-500 hover:text-primary p-1.5 rounded-full hover:bg-primary/10 transition-colors" data-id="2">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-category text-gray-500 hover:text-danger p-1.5 rounded-full hover:bg-danger/10 transition-colors" data-id="2">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-3 mb-4">
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-purple-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-image text-purple-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">图像编辑</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-purple-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-font text-purple-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">字体工具</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-purple-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-object-group text-purple-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">原型设计</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>5 个应用</span>
                            <button class="text-primary hover:underline">查看全部</button>
                        </div>
                    </div>
                </div>
                
                <!-- 开发分类 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                    <div class="h-2 bg-green-500"></div>
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-5">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-code text-green-500"></i>
                                </div>
                                <h3 class="font-bold text-dark">开发</h3>
                            </div>
                            <div class="flex space-x-2">
                                <button class="edit-category text-gray-500 hover:text-primary p-1.5 rounded-full hover:bg-primary/10 transition-colors" data-id="3">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-category text-gray-500 hover:text-danger p-1.5 rounded-full hover:bg-danger/10 transition-colors" data-id="3">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-3 mb-4">
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-green-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-terminal text-green-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">终端</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-green-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-code-fork text-green-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">版本控制</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-green-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-file-code-o text-green-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">代码编辑</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>6 个应用</span>
                            <button class="text-primary hover:underline">查看全部</button>
                        </div>
                    </div>
                </div>
                
                <!-- 娱乐分类 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                    <div class="h-2 bg-yellow-500"></div>
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-5">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-yellow-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-gamepad text-yellow-500"></i>
                                </div>
                                <h3 class="font-bold text-dark">娱乐</h3>
                            </div>
                            <div class="flex space-x-2">
                                <button class="edit-category text-gray-500 hover:text-primary p-1.5 rounded-full hover:bg-primary/10 transition-colors" data-id="4">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-category text-gray-500 hover:text-danger p-1.5 rounded-full hover:bg-danger/10 transition-colors" data-id="4">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-3 mb-4">
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-yellow-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-music text-yellow-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">音乐播放器</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-yellow-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-film text-yellow-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">视频播放</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-plus text-gray-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">添加应用</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>3 个应用</span>
                            <button class="text-primary hover:underline">查看全部</button>
                        </div>
                    </div>
                </div>
                
                <!-- 通讯分类 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                    <div class="h-2 bg-blue-500"></div>
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-5">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-comments text-blue-500"></i>
                                </div>
                                <h3 class="font-bold text-dark">通讯</h3>
                            </div>
                            <div class="flex space-x-2">
                                <button class="edit-category text-gray-500 hover:text-primary p-1.5 rounded-full hover:bg-primary/10 transition-colors" data-id="5">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-category text-gray-500 hover:text-danger p-1.5 rounded-full hover:bg-danger/10 transition-colors" data-id="5">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-3 mb-4">
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-blue-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-weixin text-blue-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">微信</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-blue-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-telegram text-blue-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">Telegram</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-blue-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-video-camera text-blue-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">视频会议</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>4 个应用</span>
                            <button class="text-primary hover:underline">查看全部</button>
                        </div>
                    </div>
                </div>
                
                <!-- 工具分类 -->
                <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                    <div class="h-2 bg-gray-500"></div>
                    <div class="p-5">
                        <div class="flex items-center justify-between mb-5">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                                    <i class="fa fa-wrench text-gray-500"></i>
                                </div>
                                <h3 class="font-bold text-dark">工具</h3>
                            </div>
                            <div class="flex space-x-2">
                                <button class="edit-category text-gray-500 hover:text-primary p-1.5 rounded-full hover:bg-primary/10 transition-colors" data-id="6">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="delete-category text-gray-500 hover:text-danger p-1.5 rounded-full hover:bg-danger/10 transition-colors" data-id="6">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-3 gap-3 mb-4">
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-vpn text-gray-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">VPN</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-lock text-gray-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">密码管理</span>
                            </div>
                            <div class="text-center app-icon-hover">
                                <div class="h-12 w-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                                    <i class="fa fa-note-sticky text-gray-500"></i>
                                </div>
                                <span class="text-xs text-gray-600">笔记工具</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span>6 个应用</span>
                            <button class="text-primary hover:underline">查看全部</button>
                        </div>
                    </div>
                </div>
                
                <!-- 添加新分类卡片 -->
                <div class="border-2 border-dashed border-gray-300 rounded-xl p-5 flex flex-col items-center justify-center h-full min-h-[220px] hover:border-primary hover:bg-primary/5 transition-all cursor-pointer group" id="add-category-card">
                    <div class="w-14 h-14 rounded-full bg-gray-100 group-hover:bg-primary/10 flex items-center justify-center mb-4 transition-colors">
                        <i class="fa fa-plus text-2xl text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                    <h3 class="font-medium text-gray-500 group-hover:text-primary transition-colors">添加新分类</h3>
                </div>
            </div>
        </section>
    </main>

    <!-- 添加/编辑分类弹出框 -->
    <div id="category-modal" class="fixed inset-0 z-50 hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/50 modal-backdrop"></div>
        <div class="bg-white rounded-xl shadow-2xl p-6 md:p-8 w-full max-w-md mx-4 relative z-10 transform transition-all">
            <span id="close-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 cursor-pointer transition-colors">
                <i class="fa fa-times"></i>
            </span>
            <h2 id="modal-title" class="text-2xl font-bold text-dark mb-6 text-center">添加分类</h2>
            <form id="category-form">
                <input type="hidden" id="category-id">
                
                <div class="mb-6">
                    <label for="category-name" class="block text-sm font-medium text-gray-700 mb-1">分类名称</label>
                    <input type="text" id="category-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all" placeholder="输入分类名称" required>
                </div>
                
                <div class="mb-6">
                    <label for="category-color" class="block text-sm font-medium text-gray-700 mb-1">分类颜色</label>
                    <div class="flex items-center gap-4">
                        <input type="color" id="category-color" class="w-12 h-12 p-0 border-0 rounded cursor-pointer" value="#3B82F6" required>
                        <div class="flex flex-wrap gap-2">
                            <span class="w-6 h-6 rounded-full bg-primary cursor-pointer color-option" data-color="#3B82F6"></span>
                            <span class="w-6 h-6 rounded-full bg-purple-500 cursor-pointer color-option" data-color="#A855F7"></span>
                            <span class="w-6 h-6 rounded-full bg-green-500 cursor-pointer color-option" data-color="#10B981"></span>
                            <span class="w-6 h-6 rounded-full bg-yellow-500 cursor-pointer color-option" data-color="#F59E0B"></span>
                            <span class="w-6 h-6 rounded-full bg-red-500 cursor-pointer color-option" data-color="#EF4444"></span>
                            <span class="w-6 h-6 rounded-full bg-blue-500 cursor-pointer color-option" data-color="#3B82F6"></span>
                            <span class="w-6 h-6 rounded-full bg-gray-500 cursor-pointer color-option" data-color="#6B7280"></span>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <label for="category-icon" class="block text-sm font-medium text-gray-700 mb-1">分类图标</label>
                    <div class="grid grid-cols-6 gap-3 max-h-40 overflow-y-auto p-2 border border-gray-200 rounded-lg">
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-briefcase">
                            <i class="fa fa-briefcase text-xl mb-1"></i>
                            <div class="text-xs">办公</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-paint-brush">
                            <i class="fa fa-paint-brush text-xl mb-1"></i>
                            <div class="text-xs">设计</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-code">
                            <i class="fa fa-code text-xl mb-1"></i>
                            <div class="text-xs">开发</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-gamepad">
                            <i class="fa fa-gamepad text-xl mb-1"></i>
                            <div class="text-xs">游戏</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-comments">
                            <i class="fa fa-comments text-xl mb-1"></i>
                            <div class="text-xs">通讯</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-wrench">
                            <i class="fa fa-wrench text-xl mb-1"></i>
                            <div class="text-xs">工具</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-graduation-cap">
                            <i class="fa fa-graduation-cap text-xl mb-1"></i>
                            <div class="text-xs">学习</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-shopping-cart">
                            <i class="fa fa-shopping-cart text-xl mb-1"></i>
                            <div class="text-xs">购物</div>
                        </div>
                        <div class="icon-option text-center p-2 rounded cursor-pointer hover:bg-gray-100" data-icon="fa-heartbeat">
                            <i class="fa fa-heartbeat text-xl mb-1"></i>
                            <div class="text-xs">健康</div>
                        </div>
                    </div>
                    <input type="hidden" id="category-icon" value="fa-briefcase">
                </div>
                
                <div class="flex justify-center space-x-4 mt-8">
                    <button type="button" id="cancel-category" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" id="submit-category" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">提交</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div id="delete-modal" class="fixed inset-0 z-50 hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/50 modal-backdrop"></div>
        <div class="bg-white rounded-xl shadow-2xl p-6 md:p-8 w-full max-w-md mx-4 relative z-10">
            <h2 class="text-xl font-bold text-dark mb-4">确认删除</h2>
            <p class="text-gray-600 mb-6">您确定要删除这个分类吗？此操作不可撤销，分类下的所有应用将被移除。</p>
            <input type="hidden" id="delete-id">
            <div class="flex justify-end space-x-3">
                <button id="cancel-delete" class="px-5 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                <button id="confirm-delete" class="px-5 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors">删除</button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="fixed top-20 right-5 z-50 hidden px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full">
        <div class="flex items-center">
            <i id="notification-icon" class="mr-3 text-xl"></i>
            <span id="notification-message"></span>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 应用使用统计图表
            const ctx = document.getElementById('usageChart').getContext('2d');
            const usageChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['文档处理', '日程安排', '邮件客户端', '图像编辑', '代码编辑', '视频播放', '微信'],
                    datasets: [{
                        label: '今日使用次数',
                        data: [12, 8, 15, 5, 9, 3, 21],
                        backgroundColor: [
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(59, 130, 246, 0.6)',
                            'rgba(59, 130, 246, 0.5)',
                            'rgba(168, 85, 247, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(245, 158, 11, 0.7)',
                            'rgba(59, 130, 246, 0.7)'
                        ],
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                drawBorder: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const header = document.querySelector('header');
                if (window.scrollY > 10) {
                    header.classList.add('py-2', 'shadow');
                    header.classList.remove('py-3', 'shadow-sm');
                } else {
                    header.classList.add('py-3', 'shadow-sm');
                    header.classList.remove('py-2', 'shadow');
                }
            });
        });

        // 模态框操作
        const categoryModal = document.getElementById('category-modal');
        const deleteModal = document.getElementById('delete-modal');
        const notification = document.getElementById('notification');

        // 打开添加分类模态框
        document.getElementById('add-category').addEventListener('click', function() {
            openAddModal();
        });

        // 通过添加卡片打开模态框
        document.getElementById('add-category-card').addEventListener('click', function() {
            openAddModal();
        });

        // 关闭模态框
        document.getElementById('close-modal').addEventListener('click', function() {
            closeModal();
        });

        document.getElementById('cancel-category').addEventListener('click', function() {
            closeModal();
        });

        // 关闭删除模态框
        document.getElementById('cancel-delete').addEventListener('click', function() {
            closeDeleteModal();
        });

        // 打开添加模态框
        function openAddModal() {
            document.getElementById('modal-title').textContent = '添加分类';
            document.getElementById('category-form').reset();
            document.getElementById('category-id').value = '';
            document.getElementById('category-color').value = '#3B82F6';
            document.getElementById('category-icon').value = 'fa-briefcase';
            resetIconSelection();
            categoryModal.classList.remove('hidden');
            categoryModal.classList.add('flex');
            // 添加动画
            setTimeout(() => {
                categoryModal.querySelector('div[class*="max-w-md"]').classList.add('scale-100');
                categoryModal.querySelector('div[class*="max-w-md"]').classList.remove('scale-95');
            }, 10);
        }

        // 打开编辑模态框
        document.querySelectorAll('.edit-category').forEach(button => {
            button.addEventListener('click', function() {
                const categoryId = this.getAttribute('data-id');
                // 模拟从服务器获取数据
                const categories = {
                    '1': {name: '办公', color: '#3B82F6', icon: 'fa-briefcase'},
                    '2': {name: '设计', color: '#A855F7', icon: 'fa-paint-brush'},
                    '3': {name: '开发', color: '#10B981', icon: 'fa-code'},
                    '4': {name: '娱乐', color: '#F59E0B', icon: 'fa-gamepad'},
                    '5': {name: '通讯', color: '#3B82F6', icon: 'fa-comments'},
                    '6': {name: '工具', color: '#6B7280', icon: 'fa-wrench'}
                };
                
                const category = categories[categoryId];
                if (category) {
                    document.getElementById('modal-title').textContent = '编辑分类';
                    document.getElementById('category-id').value = categoryId;
                    document.getElementById('category-name').value = category.name;
                    document.getElementById('category-color').value = category.color;
                    document.getElementById('category-icon').value = category.icon;
                    
                    resetIconSelection();
                    // 选中当前图标
                    document.querySelectorAll('.icon-option').forEach(option => {
                        if (option.getAttribute('data-icon') === category.icon) {
                            option.classList.add('bg-primary/10', 'border', 'border-primary');
                        }
                    });
                    
                    categoryModal.classList.remove('hidden');
                    categoryModal.classList.add('flex');
                    setTimeout(() => {
                        categoryModal.querySelector('div[class*="max-w-md"]').classList.add('scale-100');
                        categoryModal.querySelector('div[class*="max-w-md"]').classList.remove('scale-95');
                    }, 10);
                }
            });
        });

        // 打开删除模态框
        document.querySelectorAll('.delete-category').forEach(button => {
            button.addEventListener('click', function() {
                const categoryId = this.getAttribute('data-id');
                document.getElementById('delete-id').value = categoryId;
                deleteModal.classList.remove('hidden');
                deleteModal.classList.add('flex');
            });
        });

        // 关闭模态框
        function closeModal() {
            const modalContent = categoryModal.querySelector('div[class*="max-w-md"]');
            modalContent.classList.add('scale-95');
            modalContent.classList.remove('scale-100');
            setTimeout(() => {
                categoryModal.classList.add('hidden');
                categoryModal.classList.remove('flex');
            }, 200);
        }

        // 关闭删除模态框
        function closeDeleteModal() {
            deleteModal.classList.add('hidden');
            deleteModal.classList.remove('flex');
        }

        // 颜色选择
        document.querySelectorAll('.color-option').forEach(option => {
            option.addEventListener('click', function() {
                const color = this.getAttribute('data-color');
                document.getElementById('category-color').value = color;
            });
        });

        // 图标选择
        document.querySelectorAll('.icon-option').forEach(option => {
            option.addEventListener('click', function() {
                resetIconSelection();
                this.classList.add('bg-primary/10', 'border', 'border-primary');
                const icon = this.getAttribute('data-icon');
                document.getElementById('category-icon').value = icon;
            });
        });

        // 重置图标选择状态
        function resetIconSelection() {
            document.querySelectorAll('.icon-option').forEach(option => {
                option.classList.remove('bg-primary/10', 'border', 'border-primary');
            });
        }

        // 提交分类表单
        document.getElementById('category-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const categoryId = document.getElementById('category-id').value;
            const name = document.getElementById('category-name').value;
            const color = document.getElementById('category-color').value;
            const icon = document.getElementById('category-icon').value;
            
            // 模拟API请求
            setTimeout(() => {
                closeModal();
                showNotification(categoryId ? '分类更新成功' : '分类添加成功', 'success');
                
                // 这里可以添加更新UI的代码
            }, 800);
        });

        // 确认删除
        document.getElementById('confirm-delete').addEventListener('click', function() {
            const categoryId = document.getElementById('delete-id').value;
            
            // 模拟API请求
            setTimeout(() => {
                closeDeleteModal();
                showNotification('分类删除成功', 'success');
                
                // 这里可以添加更新UI的代码
            }, 800);
        });

        // 显示通知
        function showNotification(message, type = 'info') {
            const notificationEl = document.getElementById('notification');
            const iconEl = document.getElementById('notification-icon');
            const messageEl = document.getElementById('notification-message');
            
            // 设置通知类型样式
            notificationEl.className = 'fixed top-20 right-5 z-50 px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300';
            iconEl.className = 'mr-3 text-xl';
            
            if (type === 'success') {
                notificationEl.classList.add('bg-success/10', 'border', 'border-success/30', 'text-success');
                iconEl.classList.add('fa', 'fa-check-circle');
            } else if (type === 'error') {
                notificationEl.classList.add('bg-danger/10', 'border', 'border-danger/30', 'text-danger');
                iconEl.classList.add('fa', 'fa-exclamation-circle');
            } else {
                notificationEl.classList.add('bg-primary/10', 'border', 'border-primary/30', 'text-primary');
                iconEl.classList.add('fa', 'fa-info-circle');
            }
            
            messageEl.textContent = message;
            
            // 显示通知
            notificationEl.classList.remove('translate-x-full');
            notificationEl.classList.add('translate-x-0');
            
            // 3秒后隐藏
            setTimeout(() => {
                notificationEl.classList.remove('translate-x-0');
                notificationEl.classList.add('translate-x-full');
            }, 3000);
        }
    </script>